<!--
 * @Author: your name
 * @Date: 2021-09-15 20:08:18
 * @LastEditTime: 2021-09-28 10:54:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-element-admin-4.4.0\src\views\A-project\toReport\toReport.vue
-->
<template>
  <div>
    <el-dialog
      :title="headertitle"
      :visible.sync="centerDialogVisible1"
      width="60%"
      center
    >
      <el-table :data="stuinfoOrder" style="width: 100%">
        <el-table-column
          label="商品名称"
          prop="orderDetail.orderDetailName"
        ></el-table-column>
        <el-table-column
          label="店铺名称"
          prop="store.storeName"
        ></el-table-column>
        <el-table-column
          property="picture.pictureUrl"
          header-align="center"
          alizgn="center"
          width="150px"
          label="商品图片"
        >
          <template slot-scope="scope">
            <el-popover placement="right" title trigger="hover">
              <!-- 放大版 -->
              <img
                :src="scope.row.picture.pictureUrl"
                style="height: 300px; width: 400px"
                ailgn="center"
              />
              <!-- 正常版 -->
              <img
                slot="reference"
                :src="scope.row.picture.pictureUrl"
                style="max-height: 50px; max-width: 130px"
              />
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      :title="headertitle"
      :visible.sync="centerDialogVisible2"
      width="60%"
      center
    >
      <el-table :data="stuinfoStore" style="width: 100%">
        <el-table-column
          label="店铺名称"
          prop="store.storeName"
        ></el-table-column>
        <el-table-column
          property="store.storeImg"
          header-align="center"
          alizgn="center"
          width="150px"
          label="店铺图片"
        >
          <template slot-scope="scope">
            <el-popover placement="right" title trigger="hover">
              <!-- 放大版 -->
              <img
                :src="scope.row.store.storeImg"
                style="height: 300px; width: 400px"
                ailgn="center"
              />
              <!-- 正常版 -->
              <img
                slot="reference"
                :src="scope.row.store.storeImg"
                style="max-height: 50px; max-width: 130px"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button
              @click="zeroStoreStatus4(scope.row.store.storeId)"
              type="danger"
            >
              封禁
            </el-button>
            <el-button
              @click="
                zeroFindBeforeUserByBeforeUserId(
                  scope.row.beforeUser.beforeUserId
                )
              "
              type="primary"
            >
              注册人员
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      :title="headertitle"
      :visible.sync="centerDialogVisible3"
      width="60%"
      center
    >
      <el-table :data="stuinfoBeforeUser" style="width: 100%">
        <el-table-column
          label="用户姓名"
          prop="beforeUser.beforeUserName"
        ></el-table-column>
        <el-table-column
          label="用户昵称"
          prop="beforeUser.beforeUserNickName"
        ></el-table-column>
        <el-table-column
          label="用户邮箱"
          prop="beforeUser.beforeUserEmail"
        ></el-table-column>
        <el-table-column
          property="beforeUser.beforeUserImg"
          header-align="center"
          alizgn="center"
          width="150px"
          label="用户头像"
        >
          <template slot-scope="scope">
            <el-popover placement="right" title trigger="hover">
              <!-- 放大版 -->
              <img
                :src="scope.row.beforeUser.beforeUserImg"
                style="height: 300px; width: 400px"
                ailgn="center"
              />
              <!-- 正常版 -->
              <img
                slot="reference"
                :src="scope.row.beforeUser.beforeUserImg"
                style="max-height: 50px; max-width: 130px"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button
              @click="zeroBeforeUserDelete2(scope.row.beforeUser.beforeUserId)"
              type="danger"
            >
              封禁
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- {"success":true,"code":20000,"message":"成功","data":{"r":{"success":true,"code":20000,"message":"成功","data":{"zeroToReportAndOrderDetails":[{"toReportId":1,"beforeUserId":1,"reportReasonsDescribe":"这是举报内容描述","reportReasons":1,"orderDetailId":1,"createTime":"2021-09-14T13:04:39.000+0000","beforeUser":{"beforeUserId":1,"beforeUserName":"张三","beforePassword":"123","beforeUserNickName":"迪迦","beforeRoleId":1,"beforeUserImg":"http://ylsbr.oss-cn-beijing.aliyuncs.com/2021/07/19/ee70cf45ba82402a978c7b05a36f2b79.jpg","beforeUserDelete":1,"beforeUserLeavel":1,"beforeUserEmail":"1261787524@qq.com","balance":100},"orderDetail":{"orderDetailId":1,"orderDetailName":"山东红富士","orderDetailRepertory":"1000","orderDetailPrice":25.0,"orderDetailWeight":"2","orderDetailIntroduce":"红富士，山东大苹果，又甜又脆","productId":1,"orderDetailStatus":2,"spellGroupNumber":3,"spellGroupPrice":20.0,"orderDetailSales":2,"orderDetailRecommended":1,"salesReturn":0,"storeId":1},"products":{"productsId":1,"parentsId":0,"productsName":"水果"},"store":{"storeId":1,"beforeUserId":1,"storeName":"嘉然连锁店","storeImg":"http://ylsbr.oss-cn-beijing.aliyuncs.com/2021/07/19/ee70cf45ba82402a978c7b05a36f2b79.jpg"}},{"toReportId":2,"beforeUserId":1,"reportReasonsDescribe":"举报的内容","reportReasons":1,"orderDetailId":1,"createTime":"2021-09-14T13:07:32.000+0000","beforeUser":{"beforeUserId":1,"beforeUserName":"张三","beforePassword":"123","beforeUserNickName":"迪迦","beforeRoleId":1,"beforeUserImg":"http://ylsbr.oss-cn-beijing.aliyuncs.com/2021/07/19/ee70cf45ba82402a978c7b05a36f2b79.jpg","beforeUserDelete":1,"beforeUserLeavel":1,"beforeUserEmail":"1261787524@qq.com","balance":100},"orderDetail":{"orderDetailId":1,"orderDetailName":"山东红富士","orderDetailRepertory":"1000","orderDetailPrice":25.0,"orderDetailWeight":"2","orderDetailIntroduce":"红富士，山东大苹果，又甜又脆","productId":1,"orderDetailStatus":2,"spellGroupNumber":3,"spellGroupPrice":20.0,"orderDetailSales":2,"orderDetailRecommended":1,"salesReturn":0,"storeId":1},"products":{"productsId":1,"parentsId":0,"productsName":"水果"},"store":{"storeId":1,"beforeUserId":1,"storeName":"嘉然连锁店","storeImg":"http://ylsbr.oss-cn-beijing.aliyuncs.com/2021/07/19/ee70cf45ba82402a978c7b05a36f2b79.jpg"}},{"toReportId":3,"beforeUserId":1,"reportReasonsDescribe":"我举报了她卖假货","reportReasons":1,"orderDetailId":1,"createTime":"2021-09-14T13:08:01.000+0000","beforeUser":{"beforeUserId":1,"beforeUserName":"张三","beforePassword":"123","beforeUserNickName":"迪迦","beforeRoleId":1,"beforeUserImg":"http://ylsbr.oss-cn-beijing.aliyuncs.com/2021/07/19/ee70cf45ba82402a978c7b05a36f2b79.jpg","beforeUserDelete":1,"beforeUserLeavel":1,"beforeUserEmail":"1261787524@qq.com","balance":100},"orderDetail":{"orderDetailId":1,"orderDetailName":"山东红富士","orderDetailRepertory":"1000","orderDetailPrice":25.0,"orderDetailWeight":"2","orderDetailIntroduce":"红富士，山东大苹果，又甜又脆","productId":1,"orderDetailStatus":2,"spellGroupNumber":3,"spellGroupPrice":20.0,"orderDetailSales":2,"orderDetailRecommended":1,"salesReturn":0,"storeId":1},"products":{"productsId":1,"parentsId":0,"productsName":"水果"},"store":{"storeId":1,"beforeUserId":1,"storeName":"嘉然连锁店","storeImg":"http://ylsbr.oss-cn-beijing.aliyuncs.com/2021/07/19/ee70cf45ba82402a978c7b05a36f2b79.jpg"}}]}}}} -->
    <el-table
      :data="
        stuinfo.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
      style="width: 100%"
    >
      <el-table-column
        label="举报描述"
        prop="reportReasonsDescribe"
      ></el-table-column>

      <el-table-column label="用户名称">
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            title="展示用户详情"
            width="200"
            trigger="hover"
          >
            <el-button
              slot="reference"
              type="text"
              @click="zeroFindBeforeUser(scope.row)"
              >{{ scope.row.beforeUser.beforeUserName }}</el-button
            >
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="商品名称">
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            title="展示商品详情"
            width="200"
            trigger="hover"
          >
            <el-button
              slot="reference"
              type="text"
              @click="zeroFindOrderDetail(scope.row)"
              >{{ scope.row.orderDetail.orderDetailName }}</el-button
            >
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="相关店铺">
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            title="展示店铺详情"
            width="200"
            trigger="hover"
          >
            <el-button
              slot="reference"
              type="text"
              @click="zeroFindStore(scope.row)"
              >{{ scope.row.store.storeName }}</el-button
            >
          </el-popover>
        </template>
      </el-table-column>
      <!-- <el-table-column label="是否移除">
        <template slot-scope="scope">
        <el-switch
          :@change="zeroOrderDetailState4(scope.row.orderDetail.orderDetailId)"
          style="display: block"
          v-model="scope.row.orderDetail.orderDetailStatus"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="開啓"
          inactive-text="禁用"
        >
        </el-switch>
        </template>
      </el-table-column> -->

      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button
            @click="zeroOrderDetailState4(scope.row.orderDetail.orderDetailId)"
            type="danger"
          >
            封禁
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 3, 4, 5]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="stuinfo.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import toReport from "@/api/toReport/toReport";

export default {
  data() {
    return {
      // isDi:"",
      //内容条数
      pagesize: 3,
      //当前页
      currentPage: 1,
      stuinfo: [],
      stuinfoOrder: [],
      stuinfoStore: [],
      stuinfoBeforeUser: [],
      //模态框
      centerDialogVisible1: false,
      centerDialogVisible2: false,
      centerDialogVisible3: false,
      headertitle: "",
      ZeroToReportAndOrderDetail: {
        reportReasons: undefined,
        orderDetail: {
          orderDetailName: undefined,
          productId: undefined,
        },
      },
    };
  },
  methods: {
    ZeroAllCircle(){
       toReport
        .ZeroAllCircle()
        .then(
          (res) => (
            console.log(res)
          )
        );
    },
    zeroGetToReportList() {
      toReport
        .zeroGetToReportList(this.ZeroToReportAndOrderDetail)
        .then(
          (res) => (
            console.log(res),
            (this.stuinfo = res.data.r.data.zeroToReportAndOrderDetails),
            console.log(this.stuinfo)
          )
        );
    },
    zeroFindBeforeUser(row) {
      this.stuinfoBeforeUser = [];
      this.stuinfoBeforeUser.push(row);
      console.log(this.stuinfoBeforeUser);
      this.headertitle = "用户详情";
      this.centerDialogVisible3 = true;
    },
    zeroFindOrderDetail(row) {
      this.stuinfoOrder = [];
      this.stuinfoOrder.push(row);
      console.log(this.stuinfoOrder);
      this.headertitle = "商品详情";
      this.centerDialogVisible1 = true;
    },
    zeroFindStore(row) {
      this.stuinfoStore = [];
      this.stuinfoStore.push(row);
      console.log(this.stuinfoStore);
      this.headertitle = "店铺详情";
      this.centerDialogVisible2 = true;
    },
    handleSizeChange(size) {
      console.log("size" + size);
      this.pagesize = size;
    },
    handleCurrentChange(currentPage) {
      console.log("currentPage" + currentPage);
      this.currentPage = currentPage;
    },
    zeroOrderDetailState4(orderDetailId) {
      toReport.zeroOrderDetailState4(orderDetailId).then((res) =>
        // this.centerDialogVisible1 = false,
        this.zeroGetToReportList()
      );
    },
    zeroStoreStatus4(storeId) {
      toReport
        .zeroStoreStatus4(storeId)
        .then(
          (res) => (
            (this.centerDialogVisible2 = false), this.zeroGetToReportList()
          )
        );
    },
    zeroBeforeUserDelete2(beforeUserId) {
      toReport
        .zeroBeforeUserDelete2(beforeUserId)
        .then(
          (res) => (
            (this.centerDialogVisible3 = false), this.zeroGetToReportList()
          )
        );
    },
    zeroFindBeforeUserByBeforeUserId(beforeUserId) {
      toReport
        .zeroFindBeforeUserByBeforeUserId(beforeUserId)
        .then(
          (res) => (
            console.log(res.data),
            (this.stuinfoBeforeUser = []),
            this.stuinfoBeforeUser.push(res.data),
            (this.headertitle = "用户详情"),
            (this.centerDialogVisible2 = false),
            (this.centerDialogVisible3 = true)
          )
        );
    },
  },
  mounted() {
    this.zeroGetToReportList();
  },
};
</script>
<style>
/* .box-card {
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 20px;

} */
</style>